<link rel="stylesheet" href="static/css/echarts.css" />

<div class="ibox">
  <div class="ibox-title">
	  <h5>活跃盒子</h5>
  </div>
<div class="ibox-content fadeInUp animated">
<div class="wraper">
  	<div class="right">
  		<select class="select" id="channel" onchange="onchannel();">
  			<option value="">选择渠道</option>
	        <#list channelList as channel>
		    <option value="${channel.channel?c}">${channel.channel?c}</option>
		    </#list>  
	    </select>
  		<input id="start" class="laydate-icon" placeholder="请输入开始时间" value="${start_date!''}" ></input>
  		<input id="end" class="laydate-icon" placeholder="请输入结束时间" value="${end_date!''}"  ></input>
  		<input id="search" type="button" value="搜索"/>
  	</div>
  	<div class="Box">
  		<!-- 
  		<ul class="type">
   		<li>
   			<a class="active">小时</a>
   		</li>
   		<li>
   			<a>日</a>
   		</li>
   	</ul>
   	 -->
   	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
   	 <div id="main" style="width:100%;height:300px;"></div>
   	 
   	 <div class="loading_img"></div>
  	</div>    	
  </div>
  
  <script type="text/javascript">
    var start_date = '${start_date!""}';
    var end_date = '${end_date!""}';
    var type = 'day';
    var channel = '';
    var x_data = '';
    var y_data = '';
    
    /*
    layui.use(['laydate'], function(){
  	  var laydate = layui.laydate;
  	});
    */
    
    laydate({
		  elem: '#start',
		  format: 'YYYY-MM-DD', // 分隔符可以任意定义，该例子表示只显示年月
		  festival: true, //显示节日
		  //istime: true, //显示时间选项 
		  start: laydate.now(),
		  choose: function(datas){ //选择日期完毕的回调
		    $("#start").val(datas);
		  }
	});
    laydate({
		  elem: '#end',
		  format: 'YYYY-MM-DD', // 分隔符可以任意定义，该例子表示只显示年月
		  festival: true, //显示节日
		  //istime: true, //显示时间选项 
		  start: laydate.now(),
		  choose: function(datas){ //选择日期完毕的回调
		    $("#end").val(datas);
		  }
	});
  
    var myChart = echarts.init(document.getElementById('main'));
	function option(){
		// 显示标题，图例和空的坐标轴
		myChart.setOption({
		    title: {
		        text: '活跃盒子数据',
		         textStyle: {  
	                fontWeight: 'normal',              //标题颜色  
	                color: '#323232'  
	           },  
	            x:"10px",
		    },
		    tooltip: {
		    	  trigger: 'axis'
		    },
		    toolbox: {
		        show : true,
		    },
		    grid: {  
                    left: '3%',  
                    right: '3%',  
                    bottom: '3%',  
                    containLabel: true  
                },
		    legend: {
		        data:['活跃盒子数据']
		    },
		    axis:{
		    	type:'time'
		    },
		    xAxis: {
		        data: [],
		        axisLine:{
	                lineStyle:{
	                    color:'#c1d2e1',
	 
	                }
	           },
             	axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#5e5f64'
                    },
               },
              
		    },
		    yAxis: {
		    	axisLine:{
	                lineStyle:{
	                    color:'#c1d2e1',
	 
	                }
	           },
             	axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#5e5f64'
                    }
                }
		    },
		    series: [{
		        name: '活跃盒子数据',
		        type: 'line',
		        data: [],
		        symbolSize:6,
		        itemStyle:{
                	normal:{color:'#02aab4'}//修改颜色
                }
		    }]
		});
		//图表显示提示信息
		$(".loading_img").show();
	}
	
	//图表显示提示信息
	$(".loading_img").show();
	
	$(".type li").click(function(){
		$(".type a").removeClass("active");
		$(".type a").eq($(this).index()).addClass("active");
		if($(this).index()==0){
			type = "hour";
		}else if($(this).index()==1){
			type = "day";
		}
		//图表显示提示信息
		$(".loading_img").show();
		getData();
	})
	
	function ChartData(){
		setTimeout(function(){
			option();
					  myChart.setOption({
				        xAxis: {
				            data: x_data,
				            axisLabel: {
			                    show: true,
			                    textStyle: {
			                        color: '#5e5f64'
			                    },
//			                    interval:1,//横轴信息全部显示
//							    rotate: 60,//60度角倾斜显示
//								formatter:function(val){
//								    return val.split("").join("\n");
//								}
			               },
				        },
				        series: [{
				            // 根据名字对应到相应的系列
				            name: '活跃盒子数据',
				            //显示数值
//				            itemStyle : { normal: {label : {show: true}}},

//							显示所有的圆点
				            showAllSymbol:true,
				            symbolSize:6,
							data:y_data
				        }]
				    });
			    
			    $(".loading_img").hide();
		},1000)
	}
	
	function getData(){
		 $(".loading_img").show();
		 myChart.clear();
		 jQuery.ajax({  
		        type:"post",  
		        url: "idc/box_live_daily_data",
		        data : {"start_date":start_date,"end_date":end_date,"type":type,"channel":channel},
		        dataType:"json",
		        success: function(data){ 
		            console.log(data);
		            x_data = data['x_data'];
		            y_data = data['y_data'];
		            console.log(x_data);
		            console.log(y_data);
		            ChartData();
		        }
		     })
	}
	
	$("#search").click(function(){
		 start_date = $("#start").val();
		 end_date = $("#end").val();
		 if(start_date>end_date){
			layer.msg('开始日期不能大于结束日期');
            return false;  
		 }
		 getData();
	})
	
	function onchannel(){
		 channel = $("#channel").val();
		 getData();
	}
	
	getData();
            
	window.onresize = myChart.resize;
    </script>